<template>
	<div>
	<div id="inviter_container">
		<p class="p28">邀请人信息</p>
		<div id="inviter_wrapper">
			<img :src="placeholder2" v-if="!imgLoad">
			<img :src="inviter.head" v-show="imgLoad" @load="imgLoad = true">
			<div class="vertical">
				<p class="p28">{{inviter.nickname}}（邀请码：{{inviter.r_code}}）</p>
				<p class="p24 colored" v-if="inviter.is_edit == 1"
					@click="popshow = true">修改邀请人</p>
			</div>
		</div>
	</div>
	<Pop :popshow="popshow" popstyle="{width:'6.8rem', height:'auto'}"
		:popClose="popClose">
		<div class="pop-close" @click="popshow = false">×</div>
		<div id="change_inviter">
			<p class="c-txt p34">邀请人只能修改一次</p>
			<input placeholder="请输入邀请码" v-model="code">
			<p class="p24 colored" style="margin-top: .1rem">{{tip}}</p>
			<div class="c-btn reverse"
				:class="{disabled: code.length < 4 || upperAjaxing}"
				@click="clickChangeUpper">确认修改</div>
		</div>
	</Pop>
</div>
</template>
<script>
import placeholder2 from '@/assets/img/common/placeholder1.png'
import Pop from './Pop'
import { mapGetters, mapActions } from 'vuex'
export default{
	name:'Inviter',
	created(){
		this.getUpper()
	},
	data(){
		return{
			placeholder2,
			imgLoad: false,
			popshow: false,
			code: '',
			tip: ''
		}
	},
	computed:{
		...mapGetters({inviter: 'member/upper', upperAjaxing: 'member/upperAjaxing'})
	},
	methods:{
		...mapActions({getUpper: 'member/getUpper', changeUpper: 'member/changeUpper'}),
		popClose(){
			this.tip = this.code = ''
		},
		async clickChangeUpper(){
			if(this.code.length < 4 || this.upperAjaxing) return
			const {success, msg} = await this.changeUpper(this.code)
			if(success) {
				this.popshow = false
				myAlert('更换上级成功！')
			}
			else this.tip = msg
		}
	},
	components:{Pop}
}
</script>
<style lang='less' scoped>
	#inviter_container{
		padding: .3rem;
		background: #fff;
		border-bottom: 1px solid #aaa;
	}
	#inviter_wrapper{
		padding: .2rem 0 0 .2rem;
		img{
			width: 0.9rem;
			height: .9rem;
			border-radius: 100%;
			margin-right: 0.27rem;
			vertical-align: middle;
		}
	}
	#change_inviter{
		text-align: center;
		input{
			border: 1px solid #979797;
			border-radius: 8px;
			font-size: .35rem;
			width: 4rem;
			text-align: center;
			height: .8rem;
			line-height: .8rem;
			display: inline-block;
			margin-top: .5rem;
		}
		.c-btn{
			margin-top: .6rem;
			width: 2rem;
		}
	}
</style>